<template>
	<!-- 退款/售后 -->
	<!--pages/afterSales/afterSales.wxml-->
	<view class="after-sales-page">
		<view class="goods-list">

			<view class="goods-item" v-for="(item, index) in list" :key="index">
				<!-- 店铺 -->
				<view class="shop-box clearfix">
					<view class="shop-img">
						<image src="/static/images/icon/shop.png"></image>
					</view>
					<view class="shopname">{{i18n.shop}}: {{item.shopName}}</view>
				</view>
				<view class="goods-msg-box" v-if="item.orderItems.length==1">
					<!-- 图片 -->
					<view class="img-box">
						<image :src="item.orderItems[0].pic"></image>
					</view>
					<!-- 信息 -->
					<view class="goods-text">
						<view class="goods-title">{{item.orderItems[0].prodName}}</view>
						<view class="goods-quantity">{{i18n.quantity}}{{item.orderItems[0].prodCount}}{{i18n.piece}}
						</view>
						<!-- 查看详情btn -->
						<view class="item-bottom clearfix">
							<text class="view-details" :data-refundsn="item.refundSn"
								@tap="toRefundDetails">{{i18n.seeDetails}}</text>
						</view>
					</view>
				</view>
				<view class="goods-msg-box" v-else>
					<block>
						<view class="item-cont" @tap="toRefundDetails" :data-refundsn="item.refundSn">
							<scroll-view scroll-x="true" scroll-left="0" scroll-with-animation="false"
								class="categories">
								<block v-for="(prod, index2) in item.orderItems" :key="index2">
									<view class="prod-pic">
										<image :src="prod.pic"></image>
									</view>
								</block>
							</scroll-view>
						</view>
					</block>
				</view>

				<!-- 退款进度提示 -->
				<view class="goods-item-tips">
					<view class="rmb-icon">
						<!-- 仅退款 -->
						<image src="/static/images/icon/rmb-icon.png" v-if="item.applyType == 1"></image>
						<!-- 退货退款 -->
						<image src="/static/images/icon/refunds.png" v-if="item.applyType == 2"></image>
					</view>
					<!-- applyType  申请类型:1,仅退款,2退款退货 -->
					<!-- 处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭) -->
					<view class="refund-type" v-if="item.applyType == 1">{{i18n.refund01}}</view>
					<view class="refund-type" v-if="item.applyType == 2">{{i18n.refund02}}</view>
					<view class="refund-process" v-if="item.returnMoneySts == 1">{{i18n.refund1}}</view>
					<view class="refund-process" v-if="item.returnMoneySts == 2  && item.applyType == 1">
						{{i18n.refund21}}
					</view>
					<view class="refund-process" v-if="item.returnMoneySts == 2 && item.applyType == 2">
						{{i18n.refund22}}
					</view>
					<view class="refund-process" v-if="item.returnMoneySts == 3 && item.applyType == 2">{{i18n.refund3}}
					</view>
					<view class="refund-process" v-if="item.returnMoneySts == 4 && item.applyType == 2">{{i18n.refund4}}
					</view>
					<view class="refund-process" v-if="item.returnMoneySts == 5">{{i18n.refund5}}</view>
					<view class="refund-process" v-if="item.returnMoneySts == 6">{{i18n.refund6}}</view>
					<view class="refund-process" v-if="item.returnMoneySts == 7">{{i18n.refund7}}</view>
					<view class="refund-process" v-if="item.returnMoneySts == -1">{{i18n.refund_1}}</view>
				</view>

			</view>

			<!-- <view class="empty" wx:if="{{!list.length}}">您还没有退款/售后订单哦~</view> -->
			<!-- 空 -->
			<view class="empty" v-if="!list.length">
				<view class="empty-icon">
					<image src="/static/images/icon/empty.png"></image>
				</view>
				<view class="empty-text">{{i18n.refundEmpty}}</view>
			</view>

		</view>
	</view>
</template>

<script>
	// pages/afterSales/afterSales.js
	var http = require("../../utils/http.js");

	export default {
		data() {
			return {
				list: [],
				current: 1,
				pages: 0,
				startTime: '',
				//开始时间
				endTime: '' //结束时间
				//orderItems: '',  //订单项

			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},


		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.myRefundOrder(); //退款订单列表
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			//头部导航标题
			uni.setNavigationBarTitle({
				title: this.i18n.refundAfterSale
			});
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			console.log('触底pages:', this.pages)
			if (this.current < this.pages) {
				this.setData({
					current: this.current + 1
				})
				this.myRefundOrder()
			} else {
				this.setData({
					loadAll: true
				})
			}
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			/**
			 * 我的退款订单列表
			 */
			myRefundOrder: function(e) {
				uni.showLoading();
				var params = {
					url: "/p/orderRefund/list",
					method: "GET",
					data: {
						current: this.current,
						size: 20,
						startTime: this.startTime,
						endTime: this.endTime
					},
					callBack: res => {
						console.log(res);
						var list = []
						if (res.current == 1) {
							list = res.records
						} else {
							list = this.list
							list = list.concat(res.records)
						}
						console.log('list:', list)
						this.list = list
						this.pages = res.pages
						this.current = res.current
						uni.hideLoading()
					}
				};
				http.request(params);
			},

			/**
			 * 点击查看详情跳转页面
			 */
			toRefundDetails: function(e) {
				var refundSn = e.currentTarget.dataset.refundsn;
				console.log(refundSn);
				uni.navigateTo({
					url: '/pages/DetailsOfRefund/DetailsOfRefund?refundSn=' + refundSn
				});
			}
		}
	};
</script>
<style lang="scss">
	/* pages/afterSales/afterSales.wxss */
	/* 清除浮动 */
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.after-sales-page {
		display: block;
		width: 100%;
		min-height: 100vh;
		height: auto;
		overflow: auto;
		box-sizing: border-box;
		background: #f7f7f7;


		.goods-item {
			background: #fff;
			margin-bottom: 20rpx;

			&:first-child {
				margin-top: 20rpx;
			}

			/* 店铺 */
			.shop-box {
				display: block;
				padding: 20rpx;
				border-bottom: 1rpx solid #f0f0f0;


				.shop-img {
					display: inline-block;
					width: 36rpx;
					height: 36rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}

				.shop-img>iamge {
					display: block;
					width: 100%;
					height: 100%;
				}

				.shopname {
					display: inline-block;
					font-size: 28rpx;
					line-height: 1em;
					vertical-align: middle;
				}
			}

			/* 商品信息 */
			.goods-msg-box {
				background: #fff;
				padding: 25rpx 20rpx;
				border-bottom: 1rpx solid #f2f2f2;


				.img-box {
					display: inline-block;
					width: 150rpx;
					height: 150rpx;
					margin-right: 20rpx;
					background: #eee;
					vertical-align: top;
				}

				.goods-text {
					display: inline-block;
					vertical-align: top;
					width: 75%;


					.goods-title {
						font-size: 28rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/*设定显示行数*/
						-webkit-box-orient: vertical;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.goods-quantity {
						font-size: 26rpx;
						color: #888888;
						margin-top: 25rpx;
					}

					/* 查看详情 */
					.item-bottom {
						line-height: 1em;

						.view-details {
							float: right;
							/* display: inline-block; */
							font-size: 25rpx;
							vertical-align: middle;
							border: 1rpx solid #e4e4e4;
							padding: 10rpx 25rpx;
							border-radius: 8rpx;
						}
					}
				}

				.item-cont {
					display: flex;
					align-items: center;
					padding: 20rpx 30rpx;
					border-radius: 10rpx;
					display: -webkit-flex;
					display: -webkit-box;
					display: -moz-box;
					display: -ms-flexbox;
					background: #f7f7f7;
					justify-content: space-between;

					.categories {
						white-space: nowrap;

						.prod-pic {
							display: inline-block;
							width: 180rpx;
							height: 180rpx;
							margin-right: 20rpx;

							image {
								display: block;
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

			/* 提示 */
			.goods-item-tips {
				padding: 20rpx;
				padding-bottom: 25rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #f2f2f2;
				line-height: 1em;

				.rmb-icon {
					display: inline-block;
					width: 35rpx;
					height: 35rpx;
					vertical-align: middle;
					margin-right: 15rpx;
				}

				.refund-type {
					display: inline-block;
					vertical-align: middle;
					color: #888888;
					margin-right: 15rpx;
				}

				.refund-process {
					display: inline-block;
					vertical-align: middle;
					color: #555555;
				}
			}
		}

		/* 列表为空 */
		.empty {
			margin-top: 150rpx;
			text-align: cneter;


			.empty-icon {
				display: block;
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
			}

			.empty-icon>image {
				width: 100%;
				height: 100%;
			}

			.empty-text {
				font-size: 28rpx;
				text-align: center;
				color: #999;
				line-height: 2em;
			}
		}
	}
</style>
